<template>
    <view class="content overflow-hidden">
        <uv-popup ref="popup" round="10">
            <view class="pt-25 px-30 pb-45 w-300">
                <view class="flex items-center justify-between">
                    <view class="flex-1 text-center">请选择角色</view>
                    <view>
                        <uv-icon name="close" @click="closePop"></uv-icon>
                    </view>
                </view>
                <uv-form>
                    <uv-form-item>
                        <uv-radio-group placement="column" v-model="useAuthStore().userInfo.userType" label-size="15">
                            <uv-radio :label="item.name" :name="item.value" :key="item.value"
                                :customStyle="{marginTop:'15rpx'}" v-for="(item,index) in useAuthStore().userRole"
                                @change="selectRole"></uv-radio>
                        </uv-radio-group>
                    </uv-form-item>
                </uv-form>
            </view>
        </uv-popup>
        <view class="box"></view>
        <view class="container">
            <view class="card box-border" style="margin-top: -60rpx;padding: 20rpx;">
                <uv-list>
                    <uv-list-item title="角色身份"
                        :rightText="useAuthStore().userInfo.userType==null?'普通用户':useAuthStore().userInfo.userType=='stu'?'学员':'教练'"></uv-list-item>
                    <!-- @click="switchRole" -->
                </uv-list>
            </view>
            <view class="card mt-20 px-20  box-border">
                <uv-list>
                    <uv-list-item title="用户名称" rightText="微信用户" :border="true"></uv-list-item>
                    <uv-list-item title="所属城市" rightText="成都" :border="true"></uv-list-item>
                    <uv-list-item v-if="useAuthStore().userInfo.userType!=null" title="我的订单" link="navigateTo"
                        :border="true" @click="toPage"></uv-list-item>
                </uv-list>
                <!-- <uv-form label-width="160rpx" :labelStyle="{fontSize:'26rpx'}" :model="datas" :rules="rules"
                    ref="formRef">
                     <uv-form-item label="用户名称：" prop="createBy">
                        <uv-input placeholder="输入真实姓名" v-model="datas.createBy" border="none"></uv-input>
                    </uv-form-item> 
                    <uv-form-item label="手机号码：" prop="remark">
                        <uv-input placeholder="输入本人手机号" v-model="datas.remark"></uv-input>
                    </uv-form-item>
                    <uv-form-item label="所在城市：" prop="cityCategoryId">
                        <uv-input placeholder="输入所在城市" v-model="datas.cityCategoryId"></uv-input>
                    </uv-form-item>
                    <uv-form-item label="驾龄：" prop="deYear">
                        <uv-input type="number" placeholder="多少年" v-model="datas.deYear"></uv-input>
                    </uv-form-item>
                    <uv-form-item label="驾驶证件：" prop="dlImg">
                        <uv-upload v-model="datas.dlImg" @afterRead="uploadFile"></uv-upload>
                    </uv-form-item>
                    <uv-form-item label="行驶证：" prop="vlImg">
                        <uv-upload v-model="datas.vlImg"></uv-upload>
                    </uv-form-item> 
                </uv-form> -->
            </view>
            <!--  <uv-button type="primary" :customStyle="{marginTop:'20rpx'}" @click="submit">编辑</uv-button> -->
            <!-- <view class="fs-28  text-center pt-20 pb-10 c-666666" @click="logout"
                style="position: absolute;bottom: 0;left: 50%;margin-left: -25%;">
                退出登录</view> -->
            <view class="b_btn">
                <uv-button type="primary" :custom-style="{width:'100%'}" shape="circle" @click="logout">退出登录</uv-button>
            </view>
            <view class="pt-45">
                <view v-if="useAuthStore().userInfo.coachFlag==null">
                    <uv-button v-if="useAuthStore().userInfo.stuFlag==0" type="warning"
                        :customStyle="{marginTop:'20rpx',border:'none',background:'#ccc'}"> 认证成为学员（审核中） </uv-button>
                    <uv-button v-if="useAuthStore().userInfo.stuFlag==2" type="warning"
                        :customStyle="{marginTop:'20rpx',border:'none',background:'#e55c5c'}" @click="submit(2)">
                        认证成为学员（审核失败，请重新提交资料） </uv-button>
                    <uv-button shape="circle" type="warning"
                        :customStyle="{marginTop:'20rpx',border:'none',background:'#e55c5c'}" @click="submit(2)"
                        v-if="useAuthStore().userInfo.stuFlag==null">认证成为学员</uv-button>
                </view>
                <view v-if="useAuthStore().userInfo.stuFlag==null">
                    <uv-button shape="circle" v-if="useAuthStore().userInfo.coachFlag==null" type="warning"
                        :customStyle="{marginTop:'20rpx',border:'none',background:'#e55c5c'}"
                        @click="submit(1)">认证成为陪练员</uv-button>
                    <uv-button shape="circle" v-if="useAuthStore().userInfo.coachFlag==2" type="warning"
                        :customStyle="{marginTop:'20rpx',border:'none',background:'#e55c5c'}"
                        @click="submit(1)">认证成为陪练员（审核失败，请重新提交资料）</uv-button>
                    <view v-if="useAuthStore().userInfo.coachFlag==0">
                        <uv-button shape="circle" v-if="useAuthStore().userInfo.coachFlag==0" type="warning"
                            :customStyle="{marginTop:'20rpx',border:'none',background:'#ccc'}"> 认证成为陪练员（审核中） </uv-button>
                        <uv-button shape="circle" type="warning"
                            :customStyle="{marginTop:'20rpx',border:'none',background:'#e55c5c'}" @click="updateData"
                            :loading="btnLoading" loading-text="更新中，请稍后">刷新数据</uv-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import { getStuInfo, updateUserType } from "@/src/api/index"
    import { useAuthStore } from '../../stores/auth';
    //默认选中角色
    const currRole = ref(useAuthStore().currRole.value);
    //文件上传
    const uploadFile = (file) => {
        uni.uploadFile({
            url: ''
        })
    }
    const popup = ref(null);
    const btnLoading = ref(false);
    //角色切换
    const switchRole = () => {
        //获取当前角色
        if (useAuthStore().userRole.length > 0) {
            popup.value.open();
        }

        //currRole.value = useAuthStore().currRole.value;
    };
    //刷新数据
    const updateData = () => {
        btnLoading.value = true;
        useAuthStore().login().then(res => {
            if (res) {
                uni.showToast({
                    icon: "none",
                    title: "刷新成功"
                })
                btnLoading.value = false;
            }
        })
    }
    const closePop = () => {
        popup.value.close();
    }
    const selectRole = (val) => {
        //保存选中的角色
        updateUserType({ id: useAuthStore().userInfo.id, userType: val }).then(res => {
            if (res.success) {
                //修改本地存储
                useAuthStore().userInfo.userType = val;
            }

        });
        //const selectItme = useAuthStore().userRole.find(item => item.value == val);
        //useAuthStore().setRole(selectItme);

        popup.value.close();
    }
    const toPage = () => {
        //教练
        if (useAuthStore().userInfo.userType == 'coach') {
            uni.navigateTo({
                url: "/pages/order/coach"
            })
        }
        //学员
        if (useAuthStore().userInfo.userType == 'stu') {
            uni.navigateTo({
                url: "/pages/order/stu"
            })
        }
    }
    const rules = ref({
        'createBy': [
            {
                type: "string",
                required: true,
                message: '请填写姓名',
                trigger: 'blur'
            }
        ],
        'remark': [
            {
                type: "string",
                required: true,
                message: '请填写手机号',
                trigger: 'blur'
            }
        ],
        'cityCategoryId': [
            {
                type: "string",
                required: true,
                message: '请填写所在城市',
                trigger: 'blur'
            }
        ],
        'deYear': [
            {
                type: "string",
                required: true,
                message: '请填写驾龄',
                trigger: 'blur'
            }
        ],
        // 'dlImg': [
        //     {
        //         type: "string",
        //         required: true,
        //         message: '请上传驾驶证',
        //         trigger: 'blur'
        //     }
        // ],
        // 'vlImg': [
        //     {
        //         type: "string",
        //         required: true,
        //         message: '请上传行驶证',
        //         trigger: 'blur'
        //     }
        // ]
    });
    const formRef = ref(null);
    const datas = ref({
        "cityCategoryId": "",
        "createBy": "微信用户",
        "createTime": "",
        "deYear": '',
        "dlImg": "",
        "id": "",
        "remark": "",
        "statusFlag": "",
        "updateBy": "",
        "updateTime": "",
        "userId": "",
        "vlImg": ""
    });
    onMounted(() => {
        //获取学员信息
        //console.log(useAuthStore().userInfo);
        //popup.value.open();
        // getStuInfo().then(r => {
        //     console.log(r)
        // })

    })
    const logout = () => {
        useAuthStore().logout();
        uni.reLaunch({
            url: "/pages/login/index"
        })
    }
    const submit = (type) => {
        if (type == 1) {
            uni.navigateTo({
                url: "/pages/apply/coach"
            })

        } else {
            uni.navigateTo({
                url: "/pages/apply/stu"
            })

        }
        // formRef.value.validate().then(res => {
        //     if (res) {
        //         addCoach(datas.value).then(res => {
        //             console.log(res)
        //         })
        //     }
        // }).catch(error => {
        //     console.log(error)
        // })

    }
</script>
<style scoped lang="scss">
    ::v-deep .uv-list-item__content-title {
        font-size: 32rpx !important;
    }

    ::v-deep .uv-list-item__extra-text {
        font-size: 28rpx !important;
    }

    .content {
        background-color: #f3f3f3;
        min-height: 100vh;
        font-size: 30rpx;

        .b_btn {
            box-sizing: border-box;
            position: fixed;
            display: flex;
            bottom: 0;
            left: 0;
            justify-content: center;
            width: 100%;
            background-color: #fff;
            padding: 20rpx 20rpx;
        }

        .container {
            padding: 0 5%;
        }

        .box {
            height: 120rpx;
            width: 100%;
            background-color: #0061dd;
        }

        .card {
            margin-left: auto;
            margin-right: auto;
            background-color: #fff;
            border-radius: 10rpx;
            overflow: hidden;
        }
    }
</style>